<div
	style="width: 100%; height: auto; overflow: hidden; margin-bottom: 10px;"
	xmlns:th="http://www.thymeleaf.org">
	<!-- 头部begin -->
	<!-- <nav class="navbar navbar-default" role="navigation"> -->
	<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"
		role="navigation">
		<a class="navbar-brand" href="/">月亮湾欢迎你！</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		<!-- <div class="collapse navbar-collapse" id="collapsibleNavbar"> -->
		<div class="container-fluid">
			<!-- justify-content-end -->
			<ul class="nav navbar-nav navbar-left">
				<li class="nav-item"><a class="nav-link" href="/">首页</a>
				</li>
				<li
					th:if="${session.u_skl!=null and session.u_skl.userName!='' and session.u_skl.userName!=null and session.u_skl.isVip==1}"
					class="nav-item"><a class="nav-link" data-toggle='tooltip'
					data-placement="bottom"
					th:title="${#dates.format(session.u_skl.expireTime,'yyyy-MM-dd HH:mm:ss')}+'到期'"
					href="javascript:;" th:text="${session.u_skl.userName}"></a>
				</li>
				<li
					th:if="${session.u_skl!=null and session.u_skl.userName!='' and session.u_skl.userName!=null and session.u_skl.isVip==0}"
					class="nav-item"><a class="nav-link" data-toggle='tooltip'
					data-placement="bottom"
					th:title="'你的车开到'+${#dates.format(session.u_skl.expireTime,'yyyy-MM-dd HH:mm:ss')}+'没油了，请加油后继续上路！'"
					href="javascript:;" th:text="${session.u_skl.userName}"></a>
				</li>
				<li
					th:if="${session.u_skl!=null and session.u_skl.userName!='' and session.u_skl.userName!=null}"
					class="nav-item"><a class="nav-link"
					href="javascript:;" target="_blank">加油卡</a>
				</li>
				<li
					th:if="${session.u_skl!=null and session.u_skl.userName!='' and session.u_skl.userName!=null}"
					class="nav-item"><a class="nav-link" onclick="fuelFilling()"
					href="javascript:;">加点油</a>
				</li>
					
				<li th:each="vo:${cataLogList}" class="nav-item"><a
					class="nav-link" th:href="@{/xl/index.html(cataLogId=${vo.id})}"
					th:text="${vo.name}"></a>
				</li>
				<li class="nav-item"><a class="nav-link "
					onclick="alert('请点击Ctrl+D收藏')" href="javascript:;">收藏</a>
				</li>
			</ul>

			<ul class="nav navbar-nav navbar-right">

				<li
					th:if="${session.u_skl!=null and session.u_skl.userName!='' and session.u_skl.userName!=null}"
					class="nav-item"><a class="nav-link"
					id="globalLoginBtn_loginOut" href="javascript:;">退出</a></li>
				<!-- <li
					th:if="${session.u_skl==null or (session.u_skl!=null and (session.u_skl.userName=='' or session.u_skl.userName==null))}"
					class="nav-item"><a class="nav-link" data-toggle="modal"
					data-target="#myModal" href="javascript:;"><span
						class="glyphicon glyphicon-log-in"></span>登录</a>
				</li> -->
				<li class="nav-item">
					<a class="nav-link"
					id="globalLoginBtn_register_input" href="/registerInput.html"><span
						class="glyphicon glyphicon-user"></span>注册</a>
				</li>
				
				<li class="nav-item"><a class="nav-link"
					id="globalLoginBtn_register_input" href="/manager">管理</a>
				</li>

			</ul>
		</div>
	</nav>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">登录</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- 模态框主体 -->
				<div class="modal-body">
					<form id="login_form">
						<div class="form-group">
							<label for="email">账号/邮箱</label> <input type="email"
								name="account_l" class="form-control" id="email"
								placeholder="账号/邮箱">
						</div>
						<div class="form-group">
							<label for="pwd">密码</label> <input type="password"
								name="password_l" class="form-control" id="pwd" placeholder="密码">
						</div>
						<button type="button" class="btn btn-primary" id="login_btn">登录</button>
					</form>
				</div>

				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">关闭</button>
				</div>

			</div>
		</div>
	</div>
</div>
<script>
	$(function() {
		var error_info = "[[${error_info}]]";
		if (error_info != "") {
			if ("not_login" == error_info) {
				alert("该资源需要登录后访问!");

			} else if ("not_vip" == error_info) {
				alert("请充值后访问！");
			}
		}

		/**登录*/
		$("#login_btn").click(function() {
			$.ajax({
				url : "/login.html",
				type : "POST",
				dataType : "json",
				data : $("#login_form").serialize(),
				success : function(data) {
					if (data.code == "1") {
						location.reload();
					} else {
						if (data.error) {
							alert(data.error);
						} else {
							alert("用户名或密码错误！");
						}
					}
				}
			});
		});

		/**登出*/
		$("#globalLoginBtn_loginOut").click(function() {
			$.ajax({
				url : "/logout.html",
				type : "POST",
				dataType : "json",
				success : function(data) {
					if (data.code == "1") {
						location.reload();
					} else {
						alert("登出失败！请稍后重试");
					}
				}
			});
		});

		$("[data-toggle='tooltip']").tooltip();
	});

	/**
	 * 加油
	 */
	function fuelFilling() {
		var vipCode = prompt("请输入你的加油卡号：");
		if (vipCode != '' && vipCode != undefined) {
			$.ajax({
				url : "/vipCodeVerification.html",
				type : "POST",
				dataType : "json",
				data : {
					vipCode : vipCode
				},
				success : function(data) {
					if (data.code == "1") {
						alert("加油成功，继续前行");
						location.reload();
					} else {
						alert("加油失败！加油卡号不存在");
					}
				}
			});
		} else if (vipCode != undefined) {
			alert("请输入你的加油卡号!")
		}
	}
</script>
<!--登录 END-->
</div>